<template>
  <div class="dashboard-editor-container">
    <panel-group />

    <el-row :gutter="16">
      <el-col :xs="24" :sm="24" :lg="6">
        <AuthDesc cardName = '4/5G认证详情' :items=adaptData />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="chart-wrapper">
          <AdaptiveBarChart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="chart-wrapper">
          <AdaptivePie />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <!--      // xs,sm,lg是控制在不同屏幕大小情况下的布局情况，正常情况下是lg-->
      <el-col :xs="24" :sm="24" :lg="6">
        <AuthDesc cardName = '4.3认证服务' :items=fourDotThree />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="chart-wrapper">
          <AuthComplexLineChart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="chart-wrapper">
          <AuthSchemePie />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :xs="24" :sm="24" :lg="6">
        <AuthDesc cardName = '生物认证服务' :items=bioData />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="chart-wrapper">
          <LineOnPie />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="9">
        <div class="chart-wrapper">
          <BioLineChart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarChart from '@/components/Charts/BarChart'
import LineChart from '@/components/Charts/LineChart'
import PieChart from '@/components/Charts/PieChart'
import AuthDesc from '@/views/ScreenPage/components/AuthDesc'
import BioLineChart from '@/views/bioAuthData/components/BioLineChart'
import LineOnPie from '@/views/bioAuthData/components/LineOnPie'
import AuthSchemePie from '@/views/userServiceData/AuthSchemePie'
import AuthCountLine from '@/views/userServiceData/AuthCountLine'
import AdaptivePie from '@/views/adaptiveData/component/AdaptivePie'
import AdaptiveLineChart from '@/views/adaptiveData/component/AdaptiveLineChart'
import AdaptiveBarChart from '@/views/adaptiveData/component/AdaptiveBarChart'
import AuthComplexLineChart from '@/views/userServiceData/AuthComplexLineChart'
import PanelGroup from '@/views/dashboard/components/PanelGroup'
export default {
  name: 'ScreenPage',
  components: {
    PanelGroup,
    AuthCountLine,
    AuthSchemePie,
    AuthDesc,
    BarChart,
    LineChart,
    PieChart,
    BioLineChart,
    LineOnPie,
    AdaptivePie,
    AdaptiveLineChart,
    AdaptiveBarChart,
    AuthComplexLineChart
  },
  data() {
    return {
      adaptData: [
        { event: '设备认证次数', res: '7500' },
        { event: '群组认证次数', res: '7500' },
        { event: '4G认证总次数', res: '7500' },
        { event: '5G认证总次数', res: '2500' },
        { event: '星间认证总次数', res: '2500' }
      ],
      fourDotThree: [
        // 单口令认证、单短信认证、动态令牌认证、Ukey认证方案、短信验证码与口令结合方案
        { event: '单口令认证次数', res: '12341' },
        { event: '单短信认证次数', res: '12342' },
        { event: '动态令牌认证次数', res: '12345' },
        { event: 'Ukey认证次数', res: '12145' },
        { event: '短信验证码与口令结合证次数', res: '12345' },
        { event: '占位1', res: '12345' },
        { event: '占位2', res: '12345' }
      ],
      bioData: [
        { event: '活体检测平均置信度', res: '96.533' },
        // { event: '指纹认证次数', res: '7500' },
        { event: '指纹认证成功次数', res: '7000' },
        // { event: '人脸认证次数', res: '2500' },
        { event: '人脸认证成功次数', res: '2000' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;

.github-corner {
  position: absolute;
  top: 0px;
  border: 0;
  right: 0;
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 12px;
}
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
